<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{{title}} - {{site.webname}}</title>
    <link href="/static/admin/layui-vue/1.1.0.css" rel="stylesheet">
    <link href="/static/common/bmap/1.0.1.css" rel="stylesheet">
    <link href="/static/admin/spedit.css" rel="stylesheet">
</head>
<body>
    <div class="spedit">
        <!-- 左侧模块 -->
        <div class="spedit-item spedit-module">
            <label class="label">模块</label>
            <div class="module-list">
                <div class="module-item" v-for="item in moduleList" @dragstart="dragstart($event, item.module_type)" @dragend="dragend" draggable="true">
                    <i class="layui-icon" :class="'layui-icon-' + item.module_icon"></i> {$item.module_name}
                </div>
            </div>
        </div>

        <!-- 中间预览 -->
        <div class="spedit-item spedit-special">
            <label class="label">内容</label>
            <div class="special-list" @drop="drop" @dragover.prevent="dragover" @scroll="scroll" id="special-list">
                <div v-for="(item, index) in specialItemList"
                    :key="item.id"
                    :class="'special-item special-item-' + item.type + (currentItemID == item.id ? ' hover' : '') + (1 == item.enable ? '' : ' special-item-disable')"
                    :id="'special-item-' + item.id"
                    @dragstart="dragstart($event, 'sort_' + index)"
                    @dragend="dragend"
                    @click="specialItemClick(item)"
                    draggable="true"
                >
                    <component :is="'module-' + item.type" :data="item.data"></component>
                </div>
                <div class="special-place" :style="'top: ' + (topArr[place]) + 'px'" v-if="placeShow"></div>
            </div>
        </div>

        <!-- 右侧表单 -->
        <div class="spedit-item spedit-form">
            <label class="label">数据</label>
            <div class="form-list">
                <lay-form v-if="typeof(formData.type) != 'undefined'" :model="formData.data" class="layui-form layui-form-pane">
                    <lay-form-item label="模块类型" prop="rows">
                        <lay-input v-model="moduleList[formData.type].module_name" readonly></lay-input>
                    </lay-form-item>
                    <component :is="'form-' + formData.type" v-model="formData.data"></component>
                    <lay-form-item label="模块状态" prop="enable">
                        <lay-radio v-model="formData.enable" name="enable" label="1">启用</lay-radio>
                        <lay-radio v-model="formData.enable" name="enable" label="0">禁用</lay-radio>
                    </lay-form-item>
                </lay-form>
            </div>
            <div class="layui-input-block" v-if="typeof(formData.type) != 'undefined'">
                <lay-button type="primary" @click="buttonSave">保存</lay-button>
                <lay-button type="danger" @click="buttonDel">删除</lay-button>
            </div>
        </div>
    </div>

    <script src="/static/common/vue/3.2.37.js"></script>
    <script src="/static/admin/layui-vue/1.1.0.js"></script>
    <script src="/static/common/bmap/1.0.1.js"></script>
    <script>
        const special_id = parseInt("{{id}}");
        const url_special_item_list = "{{url('special_item_list')}}";
        const url_special_item_add = "{{url('special_item_add')}}";
        const url_special_item_save = "{{url('special_item_save')}}";
        const url_special_item_del = "{{url('special_item_del')}}";
        const url_special_item_sort = "{{url('special_item_sort')}}";

        const {createApp, onMounted, ref, reactive, toRefs, computed, watch, defineComponent, getCurrentInstance, nextTick} = Vue;
        const {layer} = LayuiVue;
        const libs = [LayuiVue, VueBMap];
        const components = {};
        
        const modules = {};
        VueBMap.initBMapApiLoader({
            ak: '{{map_ak}}',
        });
    </script>
    <%component_files.forEach(file => include('./components/' + file))%>
    <script src="/static/admin/spedit.js"></script>
</body>
</html>